<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<title>边框</title>
<style>
    div{
        width: 200px;
        height: 200px;
        /* 居中显示 */
        margin: auto;
    }
    .d1{
        background-color: rgb(255, 255, 255);
        /* transition：标签元素属性  操作时间  变化速度   延迟时间 */
        transition: all 2s linear 0s;
        border-radius: 50%;
    }

    .d1:hover{
        /* box-shadow: [inset表示是内嵌，不写直接添加在外部]  x轴偏移量  y轴偏移量 模糊半径 阴影面拓展 颜色 */
        box-shadow:inset 20px 20px 40px 15px rgb(49, 48, 48);
    }
</style>
<body>
<div class="d1"></div>
</body>
</html>    